<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${account.id != null} ? '编辑产品' : '添加产品'">产品表单 - OKX 数据展示</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #0c2461;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #0c2461;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 15px;
            font-weight: bold;
        }
        .form-label {
            font-weight: 500;
        }
        .required:after {
            content: " *";
            color: red;
        }
        .btn-primary {
            background-color: #1e90ff;
            border-color: #1e90ff;
        }
        .btn-primary:hover {
            background-color: #0077ea;
            border-color: #0077ea;
        }
    </style>
</head>
<body>
    <!-- 引入导航栏片段 -->
    <div th:replace="fragments/navbar :: navbar"></div>

    <div class="container">
        <div class="card">
            <div class="card-header">
                <span th:text="${account.id != null} ? '编辑产品' : '添加产品'">产品表单</span>
            </div>
            <div class="card-body">
                <!-- 添加成功和错误消息显示 -->
                <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
                    <span th:text="${successMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <span th:text="${errorMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <div th:if="${infoMessage}" class="alert alert-info alert-dismissible fade show" role="alert">
                    <span th:text="${infoMessage}"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <form th:action="@{/accounts/save}" method="post" th:object="${account}">
                    <!-- 隐藏字段：保留内部状态 -->
                    <input type="hidden" th:field="*{id}" />
                    <input type="hidden" th:field="*{crossLongCost}" />
                    <input type="hidden" th:field="*{crossShortCost}" />
                    <input type="hidden" th:field="*{crossToIsolatedShortPriceDiff}" />
                    <input type="hidden" th:field="*{crossToIsolatedLongCost}" />
                    <input type="hidden" th:field="*{isolatedLongCost}" />
                    <input type="hidden" th:field="*{isolatedShortCost}" />
                    <input type="hidden" th:field="*{crossLongReplenishCount}" />
                    <input type="hidden" th:field="*{crossShortReplenishCount}" />
                    <input type="hidden" th:field="*{isolatedLongReplenishCount}" />
                    <input type="hidden" th:field="*{isolatedShortReplenishCount}" />
                    <input type="hidden" th:field="*{isTransferIsolatedShort}" />
                    <input type="hidden" th:field="*{isTransferIsolatedLong}" />

                    <!-- 基本信息 -->
                    <div class="mb-4">
                        <h5>基本信息</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="instId" class="form-label required">产品ID</label>
                                <input type="text" class="form-control" id="instId" th:field="*{instId}" required
                                       placeholder="例如: BTC-USD-SWAP">
                                <div class="form-text">产品ID格式: [币种]-[计价币种]-[类型]</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="accountName" class="form-label required">产品名称</label>
                                <input type="text" class="form-control" id="accountName" th:field="*{accountName}" required
                                       placeholder="例如: 比特币永续合约">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="leverage" class="form-label">杠杆倍数</label>
                                <input type="text" class="form-control" id="leverage" th:field="*{leverage}"
                                       placeholder="例如: 20">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="faceValue" class="form-label">面值</label>
                                <input type="number" class="form-control" id="faceValue" th:field="*{faceValue}"
                                       placeholder="例如: 0.001">
                            </div>
                        </div>
                    </div>

                    <!-- 全仓配置 -->
                    <div class="mb-4">
                        <h5>全仓配置</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="crossPriceDiff" class="form-label">全仓价差</label>
                                <input type="number" class="form-control" id="crossPriceDiff" th:field="*{crossPriceDiff}"
                                       placeholder="例如: 100">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="crossTakeProfit" class="form-label">全仓止盈</label>
                                <input type="number" class="form-control" id="crossTakeProfit" th:field="*{crossTakeProfit}"
                                       placeholder="例如: 1000">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="crossMargin" class="form-label">全仓保证金</label>
                                <input type="number" class="form-control" id="crossMargin" th:field="*{crossMargin}"
                                       placeholder="例如: 50">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="crossPriceDiffMargin" class="form-label">全仓价差保证金</label>
                                <input type="number" class="form-control" id="crossPriceDiffMargin" th:field="*{crossPriceDiffMargin}"
                                       placeholder="例如: 50">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="conversionPriceDiff" class="form-label">转换价差</label>
                                <input type="number" class="form-control" id="conversionPriceDiff" th:field="*{conversionPriceDiff}"
                                       placeholder="例如: 100">
                            </div>
                        </div>
                    </div>

                 <!--   &lt;!&ndash; 逐仓配置 &ndash;&gt;
                    <div class="mb-4">
                        <h5>逐仓配置</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="isolatedPriceDiff" class="form-label">逐仓价差</label>
                                <input type="number" class="form-control" id="isolatedPriceDiff" th:field="*{isolatedPriceDiff}"
                                       placeholder="例如: 100">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="isolatedMargin" class="form-label">逐仓保证金</label>
                                <input type="number" class="form-control" id="isolatedMargin" th:field="*{isolatedMargin}"
                                       placeholder="例如: 50">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="isolatedPriceDiffMargin" class="form-label">逐仓价差保证金</label>
                                <input type="number" class="form-control" id="isolatedPriceDiffMargin" th:field="*{isolatedPriceDiffMargin}"
                                       placeholder="例如: 50">
                            </div>
                        </div>
                    </div>-->
                    
                    <!-- 系统状态信息（只读） -->
                <!--    <div class="mb-4" th:if="${account.id != null}">
                        <h5>系统状态</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-2"><small>创建时间：<span th:text="${#dates.format(account.createdAt, 'yyyy-MM-dd HH:mm:ss')}">-</span></small></p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-2"><small>更新时间：<span th:text="${#dates.format(account.updatedAt, 'yyyy-MM-dd HH:mm:ss')}">-</span></small></p>
                            </div>
                        </div>
                    </div>-->

                    <!-- 操作 -->
                    <div class="mt-4 d-flex justify-content-between">
                        <a href="javascript:history.back()" class="btn btn-secondary">返回</a>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="container mt-5">
        <hr>
        <p class="text-center text-muted">&copy; 2023 OKX 数据展示系统</p>
    </footer>

    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script>
        // 自动隐藏提示消息
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有警告框
            const alerts = document.querySelectorAll('.alert');

            // 3秒后自动关闭
            setTimeout(function() {
                alerts.forEach(function(alert) {
                    // 创建关闭事件
                    const closeEvent = new bootstrap.Alert(alert);
                    closeEvent.close();
                });
            }, 3000);

            // 简化的表单验证
            const form = document.querySelector('form');

            if (form) {
                form.addEventListener('submit', function(event) {
                    let isValid = true;
                    let errorMessage = '';

                    // 只验证产品ID和产品名称
                    const instId = document.getElementById('instId');
                    const accountName = document.getElementById('accountName');

                    if (!instId.value.trim()) {
                        isValid = false;
                        errorMessage += '产品ID不能为空<br>';
                        instId.classList.add('is-invalid');
                    } else {
                        instId.classList.remove('is-invalid');
                    }

                    if (!accountName.value.trim()) {
                        isValid = false;
                        errorMessage += '产品名称不能为空<br>';
                        accountName.classList.add('is-invalid');
                    } else {
                        accountName.classList.remove('is-invalid');
                    }

                    // 如果表单无效，阻止提交并显示错误
                    if (!isValid) {
                        event.preventDefault();

                        // 创建错误提示
                        const errorDiv = document.createElement('div');
                        errorDiv.className = 'alert alert-danger alert-dismissible fade show';
                        errorDiv.setAttribute('role', 'alert');
                        errorDiv.innerHTML = errorMessage +
                            '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>';

                        // 移除之前的错误提示
                        const oldError = document.querySelector('.alert-danger');
                        if (oldError) {
                            oldError.remove();
                        }

                        // 添加到表单前面
                        form.parentNode.insertBefore(errorDiv, form);

                        // 滚动到页面顶部
                        window.scrollTo(0, 0);
                    }
                    history.back()
                });

                // 修正number输入框的浏览器默认验证问题
                const numberInputs = document.querySelectorAll('input[type="number"]');
                numberInputs.forEach(input => {
                    // 移除浏览器默认的step验证
                    input.setAttribute('step', 'any');

                    // 确保输入的是有效数字
                    input.addEventListener('input', function(e) {
                        // 如果输入的不是有效数字，清除输入
                        if (this.value !== '' && isNaN(parseFloat(this.value))) {
                            this.value = '';
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>
